<template>
	<view class="order-list">
		<view v-for="(order, index) in orders" :key="index" class="order-card">
			<view class="order">
				<view class="order-header">
					<span class="order-id">订单编号：{{ bottonBool ? order.orderNumber : order.wpOrderNumber }}</span>
					<span class="order-status">{{ titleStatus(order.changeSource) == '交易成功' ? '交易成功' : '' }}</span>
				</view>

				<view class="order-body" v-if="">
					<view class="product-section" v-if="titleStatus(order.changeSource) == '交易成功' && order.axGood">
						<view class="product-image-container">
							<image :src="path + order.axGood.goodImg.split(',')[0]" mode="aspectFill"></image>
						</view>

						<view class="product-details">
							<view class="product-title">{{ order.axGood.goodName }}</view>
							<u-rate :value="order.axGood.goodStars" disabled></u-rate>

							<view class="quantity">数量：x{{ bottonBool ? order.shopNumber : order.sellNumber }}</view>
							<view class="right-bottom">
								<text>
									<span>￥</span>
									{{ bottonBool ? order.changeAmount : order.sellPrice * order.sellNumber }}
								</text>
							</view>
						</view>
					</view>

					<view v-else>
						<view class="right-bottom">
							<view v-if="order.changeSource == '2'" class="flex align-center flex-between">
								<text>竞拍订单支付（支出） - 余额</text>
								<text>{{ order.changeAmount }}</text>
							</view>
							<view v-else-if="order.changeSource == '1'" class="flex align-center flex-between">
								<text>系统充值（充值） - 余额</text>
								<text style="color: red">+{{ order.changeAmount }}</text>
							</view>
							<view v-else-if="order.changeSource == '3'" class="flex align-center flex-between">
								<text>出售（本金） - 余额</text>
								<text style="color: red">+{{ order.changeAmount }}</text>
							</view>

							<view v-else-if="order.changeSource == '6'" class="flex align-center flex-between">
								<text>出售（提现券） - 余额</text>
								<text style="color: red">+{{ order.changeAmount }}</text>
							</view>

							<view v-else-if="order.changeSource == '4'" class="flex align-center flex-between">
								<text>提现卷提现（提现） - 余额</text>
								<text style="color: red">+{{ order.changeAmount }}</text>
							</view>
							<view v-else-if="order.changeSource == '5'" class="flex align-center flex-between">
								<text>推荐用户提成（推荐） - 津贴卷</text>
								<text style="color: red">+{{ order.changeAmount }}</text>
							</view>
							<view v-else-if="order.changeAmount.charAt(0) === '-'" class="flex align-center flex-between">
								<text>{{ order.changeSourceName }} - 余额</text>
								<text>{{ order.changeAmount }}</text>
							</view>
							<view v-else class="flex align-center flex-between">
								<text>{{ order.changeSourceName }} - 余额</text>
								<text>+{{ order.changeAmount }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="order-footer">
					<span class="order-date">{{ order.createTime }}</span>
					<!-- <view v-if="" class="botton-btn">
						领取5
						<image src="/static/user/Frame20.png" style="width: 32rpx; height: 32rpx; margin-left: 5rpx" mode="aspectFill"></image>
					</view> -->
					<span v-if="!bottonBool" class="order-status-completed">已完成</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
export default {
	name: 'record-listing',
	props: {
		orders: {
			type: Array,
			required: true
		},
		bottonBool: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			path: api.getPath()
		};
	},
	computed: {},
	methods: {
		titleStatus(item) {
			if (!this.bottonBool) {
				return '交易成功';
			} else {
				return;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-evenly {
	justify-content: space-evenly;
}
.flex-column {
	flex-direction: column;
}
.order {
	background-color: #ffffff;
	margin: 30rpx;
	border-radius: 30rpx;
}

.botton-btn {
	display: flex;
	align-items: center;
	padding: 7rpx 10rpx;
	border: 1px solid #f88725;
	border-radius: 50rpx;
	font-size: 24rpx;
	color: #f05a39;
}

.order-list {
	.order-card {
		margin-bottom: 16px;

		.order-header {
			display: flex;
			justify-content: space-between;
			padding: 16px;

			.order-id {
				font-size: 14px;
				color: #666;
			}

			.order-status {
				font-size: 14px;
				color: #f56c6c;
			}
		}

		.order-body {
			padding: 0 16px;

			.product-section {
				display: flex;
				border-bottom: 1px dashed #f0f0f0;
				border-radius: 4px;
				overflow: hidden;

				.product-image-container {
					image {
						width: 260rpx;
						height: 210rpx;
						border-radius: 20rpx;
					}
				}

				.product-details {
					flex: 1;
					padding-left: 16px;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.right-bottom {
						display: flex;
						align-items: center;

						text {
							font-family: MiSans, MiSans;
							font-weight: 500;
							font-size: 30rpx;
							color: #f05a39;
							text-align: center;
							font-style: normal;
							text-transform: none;

							span {
								font-size: 23rpx;
							}
						}
					}

					.product-title {
						font-weight: 550;
						font-size: 28rpx;
						color: #000000;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.quantity {
						font-size: 14px;
						color: #666;
						margin-bottom: 10px;
					}

					.points {
						font-size: 14px;
						color: #f56c6c;
					}
				}
			}
		}

		.order-footer {
			display: flex;
			justify-content: space-between;
			padding: 16px;

			.order-date {
				font-size: 14px;
				color: #999;
			}

			.order-status-completed {
				font-size: 14px;
				color: #999;
			}
		}
	}
}
</style>